<template>
  <el-table :data="UseListArr" style="width: 100%" center>
    <el-table-column prop="adminname" label="用户名" />
    <el-table-column prop="role" label="角色" />
    <el-table-column prop="password" label="密码" />
    <el-table-column prop="adminid" label="ID" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="User">
        <el-button size="small" type="primary" @click="ChangeFn">编辑</el-button>
        <el-button size="small" type="danger" @click="DeleteFn(User.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { adminListReq, DeleteUserReq } from '../api/login.ts'
import { ref } from 'vue'
const UseListArr = ref([])
function loadList() {
  adminListReq().then((res) => {
    console.log(res.data)
    if (res.data.code == 200) {
      UseListArr.value = res.data.data
      ElMessage({
        message: res.data.message,
        type: 'success',
        plain: true
      })
    }
  })
}
loadList()
// 编辑用户信息
function ChangeFn() {}
function DeleteFn(item) {
  console.log(item)
  DeleteUserReq(item.adminid).then((res) => {
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.message,
        type: 'success',
        plain: true
      })
    }
    loadList()
  })
}
</script>
<style lang="scss" scoped></style>
